<template>
  <v-page>
    <view class="layout-main">
      <search-input/>
      <view class="list bg-light p-l-lg">
        <u-swipe-action
          :index="index"
          :show="value"
          :options="options"
          v-for="(item, index) in 20"
          :key="item"
        >
          <v-link
            to="/pages/chat/index"
            class="item d-flex align-center"
            :key="item"
          >
            <min-dadge :count="9">
              <user-head class="w-46 h-46"></user-head>
            </min-dadge>
            <view class="flex-fill m-l-lg d-flex p-y-lg border-b">
              <view class="info flex-fill">
                <view class="name fn-16"> 王华华 </view>
                <view class="msg color-tips fn-sm eps-1"> 睡觉去了 </view>
              </view>
              <view class="time fn-11 color-tips m-r-lg"> 12:14 </view>
            </view>
          </v-link>
        </u-swipe-action>
      </view>
    </view>
    <uni-transition
      class="fun p-l-sm p-r-md p-y-sm rounded bg-theme color-light fn-md"
      :mode-class="['slide-bottom', 'fade']"
      :show="show"
    >
      <view class="d-flex align-center">
        <view class="iconfont fn-20 m-x-sm">&#xe6d7; </view>
        <view class="flex-fill p-y-md p-l-sm border-b"> 发起群聊 </view>
      </view>
      <v-link to="/pages/search/index" class="d-flex align-center">
        <view class="iconfont fn-20 m-x-sm">&#xe639; </view>
        <view class="flex-fill p-y-md p-l-sm border-b"> 添加好友 </view>
      </v-link>
      <view class="d-flex align-center" @click="scanCode">
        <view class="iconfont fn-20 m-x-sm">&#xe71d; </view>
        <view class="flex-fill p-y-md p-l-sm border-b"> 扫一扫 </view>
      </view>
    </uni-transition>
  </v-page>
</template>

<script>
import minDadge from "components/min-badge/min-badge.vue";
import uSwipeAction from "uview-ui/components/u-swipe-action/u-swipe-action.vue";
export default {
  data() {
    return {
      value: false,
      show: false,
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#dd524d",
          },
        },
      ],
    };
  },
  components: {
    minDadge,
    uSwipeAction,
  },
  onNavigationBarButtonTap() {
    this.show = !this.show;
  },
  onHide(){
    this.show = false
  },
  methods: {
    scanCode() {
      uni.scanCode({
        success: ($ev) => {
          console.log($ev)
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.fun {
  position: fixed;
  top: 0;
  /*  #ifdef  H5  */
  top: 88rpx;
  /*  #endif  */
  right: $padding-md;
}
</style>
